<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form
          v-show="showSearch"
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="用户名" prop="userName">
            <el-input
              v-model="username"
              placeholder="请输入用户名"
              clearable
              size="small"
              style="width: 350px "

              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="用户昵称" prop="userName">
            <el-input
              v-model="nickname"
              placeholder="请输入用户昵称"
              clearable
              size="small"
              style="width: 350px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="用户邮箱" prop="email">
            <el-input
              v-model="email"
              placeholder="请输入用户邮箱"
              clearable
              size="small"
              style="width: 350px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="用户状态" prop="status">
            <el-select
              v-model="status"
              placeholder="请选择用户状态"
              clearable
              size="small"
              style="width: 200px"
            >
              <el-option :key="0" label="正常" :value="0" />
              <el-option :key="1" label="停用" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >搜索</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">

          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              @click="handleDelete"
            >删除</el-button>
          </el-col>

          <!-- <right-toolbar
            :show-search.sync="showSearch"
            :columns="columns"
            @queryTable="getList"
          /> -->
        </el-row>

        <el-table :data="UserList" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column
          label="用户头像"
          prop="headimg"
          align="center"
        >

          <template slot-scope="scope">
            <el-image
              style="width: 80px; height:80px; margin-bottom:-4px;;border-radius: 50%"
              :src="scope.row.headimg"

            >
            </el-image>
          </template>
        </el-table-column>
          <el-table-column prop="id" label="用户编号" align="center" />
          <el-table-column prop="username" label="用户名" align="center" />
          <el-table-column prop="nickname" label="用户昵称" align="center" />
          <el-table-column prop="email" label="邮箱" align="center" />
          <el-table-column prop="sex" label="性别" align="center"
          :formatter="sex" />
          <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="0"
                inactive-value="1"
                @change="handleStatusChange(scope.row)"
              />
            </template>
          </el-table-column>


          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template v-if="scope.row.id !== 1" slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="Delete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-pagination
      :page-size.sync="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-sizes="[10,20,30,40]"
      :current-page.sync="queryParams.pageNum"
      @current-change="handleCurrentChange"
      @size-change="handleCurrentChange"
    />
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="form.username"
                placeholder="请输入用户名"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickname">
              <el-input
                v-model="form.nickname"
                placeholder="请输入用户昵称"
                maxlength="11"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="form.password"
                placeholder="请输入密码"
                maxlength="20"
                type="password"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="form.email"
                placeholder="请输入邮箱"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="用户性别">
              <el-select v-model="form.sex" placeholder="请选择">
                <el-option :key="'1'" label="男" :value="'1'" />
                <el-option :key="'0'" label="女" :value="'0'" />
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { searchUser,changeUserStatus,delUser,getUserById,updateUser} from '@/api/system/user';


export default {
  name: 'User',
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,

      },
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单校验
      rules: {
        username: [
          { required: true, message: '用户名称不能为空', trigger: 'blur' },
          {
            min: 2,
            max: 20,
            message: '用户名称长度必须介于 2 和 20 之间',
            trigger: 'blur'
          }
        ],
        nickname: [
          { required: true, message: '用户昵称不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '用户密码不能为空', trigger: 'blur' },
         
        ],
        email: [
          { required:true},
          {
            type: 'email',
            message: "'请输入正确的邮箱地址",
            trigger: ['blur', 'change']
          }
        ],

      },
      // 角色选项
      roleOptions: [],
      // 显示搜索条件
      showSearch: true,
      // 遮罩层
      loading: true,
      // 用户表格数据
      userList: null,
      // 总条数
      total: 0,
      // 选中数组
      ids: [],
      // 表单参数
      form: {},
      username:"",
      nickname:"",
      email:"",
      status:"",
      UserList:[]
    }
  },
  watch: {},
  created() {
    this.search(this.username,this.nickname,this.email,this.status,1,this.queryParams.pageSize);
  },
  methods: {
    sex(row,index)
    {
        if(row.sex==1)
        {
          return "男";
        }
        else{
          return "女";
        }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.loading = true;
      this.search(this.username,this.nickname,this.email,this.status,1,this.queryParams.pageSize);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    /** 查询用户列表 */
    search(username,nickname,email,status,page,size)
    {
       this.loading = true;
       searchUser(username,nickname,email,status,page,size).then((response) => {
        this.UserList=response.rows;
        this.total=response.total;
        this.loading = false;

      });
    },
    // 用户状态修改
    handleStatusChange(row) {
      const text = row.status === '0' ? '启用' : '停用'
      this.$modal
        .confirm('确认要"' + text + '""' + row.username + '"用户吗？')
        .then(function() {
          return changeUserStatus(row.id, row.status)
        })
        .then(() => {
          this.$modal.msgSuccess(text + '成功')
        })
        .catch(function() {
          row.status = row.status === '0' ? '1' : '0'
        })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      this.open = true
      console.log(row.id)
      getUserById(row.id).then((response) => {
             this.form.username=response.username;
             this.form.sex=response.sex;
             this.form.id=response.id;
             this.form.nickname=response.nickname;
             this.form.email=response.email;
             this.form.password=response.password;
             console.log(response)
            });
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        username: undefined,
        nickname: undefined,
        password: undefined,
        email: undefined,
        sex: undefined,
      }
      this.resetForm('form')
    },
    /** 新增用户 */
    handleAdd() {
      this.reset()
      listAllRole().then((response) => {
        this.roleOptions = response
        this.open = true
        this.title = '添加用户'
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids =  this.ids
      this.$modal
        .confirm('是否确认删除用户编号为"' + ids + '"的数据项？')
        .then(function() {
          var i=0;
          while(ids[i+1])
          {
             delUser(ids[i])
            i=i+1;
          }
          return  delUser(ids[i])

        })
        .then(() => {
          this.queryParams.pageNum=1;
          this.search(this.username,this.nickname,this.email,this.status,1,this.queryParams.pageSize)
          this.$modal.msgSuccess('删除成功');
        })
        .catch(() => {})
    },
    Delete(row) {
      this.$modal
        .confirm('是否确认删除板块编号为"' + row.id + '"的数据项？')
        .then(function() {
             return delUser(row.id);
        })
        .then(() => {
          this.queryParams.pageNum=1;
          this.search(this.username,this.nickname,this.email,this.status,1,this.queryParams.pageSize)
          this.$modal.msgSuccess('删除成功');
        })
        .catch(() => {})
    },
    handleCurrentChange() {
      this.search(this.username,this.nickname,this.email,this.status,this.queryParams.pageNum,this.queryParams.pageSize);

    },
    /** 提交按钮 */
   submitForm: function() {
      this.$refs["form"].validate((valid) => {
        if(valid)
        {
      this.open = false;

           updateUser(this.form.id,this.form.username,this.form.nickname,this.form.password,this.form.email,this.form.sex).then((response) => {
              this.$modal.msgSuccess('修改成功');
              this.open = false;
              this.queryParams.pageNum=1;
              this.search(this.username,this.nickname,this.email,this.status,1,this.queryParams.pageSize);
            });
   }});
    }
  }
}
</script>
